<template>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right;
          ;margin-right: 30px" type="primary" @click="handleSearch()" size="small">
          查询搜索
        </el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
          重置
        </el-button>
      </div>

      <div style="margin-top: 30px; ">
        <el-form style="display: inline-block;">
          <!-- <el-form :inline="true" :model="listQuery" size="small" label-width="140px"> -->
          <div style="display: inline-block;margin-left:20px;margin-right: 30px;">
            <el-form-item label="货品名:">
              <el-input v-model="searchForm.name" class="input-width" placeholder="商品名" clearable></el-input>
            </el-form-item>
          </div>
          <div style="display: inline-block;margin-left:20px;margin-right: 30px;">
            <el-form-item label="关键字:">
              <el-input v-model="searchForm.keywords" class="input-width" placeholder="关键字" clearable></el-input>
            </el-form-item>
          </div>
          <div style="display: inline-block;margin-left:20px;margin-right: 30px;">
            <el-form-item label="货品类目:">
              <el-tree-select v-model="searchForm.productCategoryId" :data="productCategoryOptions"
                :render-after-expand="false" style="width: 120px" clearable />
              <!-- <el-input v-model="searchForm.keywords" class="input-width" placeholder="商品类目"></el-input> -->
            </el-form-item>
          </div>

        </el-form>
      </div>
    </el-card>
  </div>

  <el-table :data="tableData.list" style="margin-top: 10px;">
    <el-table-column prop="productCategoryName" label="货品类目"></el-table-column>
    <el-table-column prop="name" label="货品名称"></el-table-column>
    <!-- <el-table-column prop="sort" label="排序"></el-table-column> -->
    <!-- <el-table-column prop="keywords" label="搜索关键字"></el-table-column> -->
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column prop="unit" label="单位"></el-table-column>
    <el-table-column prop="priceRules" label="货品价格规则"></el-table-column>
    <!-- <el-table-column prop="priceRules" label="货品价格规则列表"></el-table-column> -->
    <el-table-column prop="note" label="备注信息"></el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="open(scope.row)">
          编辑商品
        </el-button><br>
        <el-button link type="primary" size="small">删除商品</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog 
    v-model="dialogFormVisible"
    :before-close="beforeClose"
    title="编辑商品信息"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      >
      <el-form-item prop="productCategoryName" label="货品类目：">
        <el-input v-model="form.productCategoryName"/>
      </el-form-item>
      <el-form-item prop="name" label="货品名称：">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item prop="price" label="价格：">
        <el-input v-model="form.price"/>
      </el-form-item>
      <el-form-item prop="unit" label="单位：">
        <el-input v-model="form.unit"/>
      </el-form-item>
      <el-form-item prop="priceRules" label="货品价格规则：">
        <el-input v-model="form.priceRules"/>
      </el-form-item>
      <el-form-item prop="note" label="备注信息：">
        <el-input v-model="form.note"/>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-left: 50%;" @click="confirm(formRef)">提交</el-button>
  </el-dialog>
</template>
<script setup>
import { productList, productSearchList, getProductCategory } from '../api';
import {nextTick, ref, reactive, onMounted, VueElement } from 'vue'
//数据表数据
const tableData = reactive({
  list: []
})
onMounted(() => {
  // productList().then(({ data }) => {
  //   console.log(data)
  //   tableData.list = data
  // })
  handleSearch();
  getProductCategoryList();

})

//查询事件
const handleSearch = async () => {
  console.log('查询内容1',searchForm.value)
  let res = await productSearchList(searchForm.value)

  console.log('查询内容', res.data)
  tableData.list = res.data.list;
  console.log('查询结果', tableData.value)
}
  1
//查询事件
const handleResetSearch = async () => {
  searchForm.value = {
    keywords: '',
    name: '',
    note: '',
    pageNum: 1,
    pageSize: 100,
    price: '',
    priceRules: '',
    productCategoryId: null,
    productCategoryName: '',
    sort: '',
    unit: '',
    unitWeight: '',
  };
  handleSearch();
}

let searchForm = ref({
  keywords: '',
  name: '',
  note: '',
  pageNum: 1,
  pageSize: 100,
  price: '',
  priceRules: '',
  productCategoryId: null,
  productCategoryName: '',
  sort: '',
  unit: '',
  unitWeight: '',
})

let productCategoryResult = ref([])

let productCategoryOptions = ref([])

const getProductCategoryList = async () => {
  let res = await getProductCategory()
  console.log('商品分类', res.data)
  productCategoryResult.value = res.data

  productCategoryResult.value.forEach(item => {
    productCategoryOptions.value.push({
      value: item.id,
      label: item.name
    })
  })
  console.log('商品分类', productCategoryOptions.value)
}

//编辑数据
const dialogFormVisible = ref(false)
const formRef = ref()
const form = reactive({
  keywords: '',
  name: '',
  note: '',
  price: '',
  priceRules: '',
  productCategoryId: null,
  productCategoryName: '',
  sort: '',
  unit: '',
})

const rules = reactive({
  keywords:[{required:false,trigger:'blur',messege:'请填写货品关键字'}],
  name:[{required:false,trigger:'blur',messege:'请填写货品名字'}],
  note:[{required:false,trigger:'change',messege:'请填写备注'}],
  price:[{required:false,trigger:'blur',messege:'青苔那些价格'}],
  priceRules:[{required:false,trigger:'blur',messege:'请填写价格规则'}],
  productCategoryId:[{required:false,trigger:'blur',messege:'请填写名字'}],
  sort:[{required:false,trigger:'change',messege:'请填写排序'}],
  unit:[{required:false,trigger:'blur',messege:'请填写货品单位'}],
})

const getListData = () =>{
  productList().then(({data}) =>{
    tableData.list=list
  })
}

const open = (rowData={}) => {
  dialogFormVisible.value = true
  //弹窗打开form 声称是异步的 
  nextTick(()=> {
    //如果是编辑
    if (rowData){
      Object.assign(form,rowData)
      console.log("这里是获取编辑数据",rowData)
    }
  })
}

// //关闭弹窗回调
// const beforeClose = () =>{

//   dialogFormVisible.value = false
//   //重置表单
//   formRef.value.resetFileds()
//   //tree
// }

</script>
<style lang="less"></style>